{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Archery</title>
    <link rel="icon" href="{% static 'logo.png' %}" type="image/x-icon">
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type='text/css'/>
    <link rel="stylesheet" href="{% static 'css/bootstrap-responsive.min.css' %}" type='text/css'/>
    <link rel="stylesheet" href="{% static 'css/archery-login.css' %}" type='text/css'/>
    <link rel="stylesheet" href="{% static 'css/select2.css' %}" type='text/css'/>
    <link rel="stylesheet" href="{% static 'css/uniform.css' %}" type='text/css'/>
    <link rel="stylesheet" href="{% static 'archerysecurity/css/style.css' %}" type='text/css'/>
    <link rel="stylesheet" href="{% static 'archerysecurity/css/media.css' %}" type='text/css'/>
    <link href="{% static 'font-awesome/css/font-awesome.css' %}" type='text/css' rel="stylesheet"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>

</head>
<body>
<div id="loginbox">
    <form class="form-vertical" action="{% url 'webscanners:signup' %}" method="POST" name="password_validate"
          id="example-form">{% csrf_token %}
        <div class="control-group normal_text"><h3><img src="{% static 'archery.png' %}"
                                                        style="max-width:190px; margin-top: 10px;" alt=""/></h3></div>
        <div class="control-group">
            <div class="controls">
                {% if messages %}
                    <ul class="messages" style="margin: 20px 20px 20px 20px;">
                        {% for msg in messages %}
                            <div class="alert alert-{{ msg.level_tag }}" role="alert">
                                {{ msg.message }}
                            </div>
                        {% endfor %}
                    </ul>
                {% endif %}
                <div class="main_input_box">
                    <span class="add-on bg_lg"><i class="icon-user"> </i></span>
                    <input type="text" name="username" id="username" class="required form-control" placeholder="Username" value="">
                </div>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <div class="main_input_box">
                    <span class="add-on bg_lg"><i class="icon icon-envelope"> </i></span>
                    <input placeholder="Email" type="text" class="required form-control" name="email" id="email">
                </div>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <div class="main_input_box">
                    <span class="add-on bg_ly"><i class="icon-lock"></i></span>
                    <input placeholder="Password" type="password" class="required form-control" name="password" id="password"/>
                </div>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <div class="main_input_box">
                    <span class="add-on bg_ly"><i class="icon-lock"></i></span>
                    <input placeholder="Confirm password" type="password" class="required form-control" id="confirm" name="confirm"/>
                </div>
            </div>
        </div>
        <div class="form-actions">
            <span class="pull-left"><a href="{% url 'webscanners:login' %}" class="btn btn-lg btn-primary" tabindex="2"
                                       type="submit">Sign In</a></span>

            <span class="pull-right"><button class="btn btn-lg btn-primary " type="submit"
                                             value="Validate">Sign Up</button></span>
        </div>
    </form>
</div>

<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/archery.login.js' %}"></script>
<script src="{% static 'js/archery.form_validation.js' %}"></script>
<script src="{% static 'js/jquery.validate.js' %}"></script>
<script src="{% static 'js/jquery.ui.custom.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.uniform.js' %}"></script>
<script src="{% static 'js/select2.min.js' %}"></script>
<script src="{% static 'archerysecurity/js/base.js' %}"></script>
</body>

<script>
        // Basic Example with form
    var form = $("#example-form");
    form.validate({
        errorPlacement: function errorPlacement(error, element) { element.before(error); },
        rules: {
            confirm: {
                equalTo: "#password"
            }
        }
    });
     form.children("div").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        onStepChanging: function(event, currentIndex, newIndex) {
            form.validate().settings.ignore = ":disabled,:hidden";
            return form.valid();
        },
        onFinishing: function(event, currentIndex) {
            form.validate().settings.ignore = ":disabled";
            return form.valid();
        },
        onFinished: function(event, currentIndex) {
            alert("Submitted!");
        }
    });


    </script>

</html>
